<template>
  <div class="col-grow column loginWrap">
    <div class="login">
      <div class="login-left">
        <div style="position: absolute; top: 30px; left: 30px">
          <p style="color: #fff; font-size: 20px; margin-bottom: 10px">
            大实施后台管理系统
          </p>
          <p style="color: #fff; font-size: 12px">算力平台</p>
        </div>
        <img
          :src="loginPages"
          style="
            position: absolute;
            bottom: 70px;
            right: 30px;
            width: 300px;
            height: 200px;
          "
        />
      </div>
      <div class="login-right">
        <div class="language">
          <img :src="network" class="language-icon" />
          <el-dropdown @command="handleCommand" class="select">
            <span class="el-dropdown-link">
              {{ languageText
              }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="English">英文</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="loginTitle">
          <div class="text">密码登录</div>
          <div class="line"></div>
        </div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          style="width: 100%; margin-top: 20px"
          status-icon
        >
          <el-form-item prop="username">
            <el-input
              spellcheck="false"
              v-model="ruleForm.username"
              placeholder="用户名/邮箱"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              spellcheck="false"
              autocomplete="off"
              :type="passwordShow ? 'text' : 'password'"
              v-model="ruleForm.password"
              placeholder="密码"
              @keyup.enter="sign"
            >
              <template #suffix
                ><i class="password-eyes" @click="passwordShow = !passwordShow">
                  <img
                    style="width: 16px"
                    :src="passwordShow ? openEye : closeEye"
                  />
                </i>
              </template>
            </el-input>
          </el-form-item>
          <p
            style="
              width: 100%;
              text-align: right;
              font-size: 12px;
              color: #7f8289;
            "
          >
            忘记密码
          </p>
          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              @click="submitForm(ruleFormRef)"
              style="width: 100%; height: 50px"
            >
              登录
            </el-button>
          </el-form-item>
          <p style="text-align: center; font-size: 12px">
            没有账号？<span style="color: rgb(108, 116, 247)">立即注册</span>
          </p>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import loginPages from 'assets/dataSet/login-pages.png';
import network from 'assets/dataSet/network.png';
import openEye from 'assets/dataSet/open-eye.png';
import closeEye from 'assets/dataSet/close-eye.png';
import { ArrowDown } from '@element-plus/icons-vue';
let languageText = ref('中文');
import { ref, reactive } from 'vue';
import { useAuthStore } from 'src/stores/auth';
// import {useMenuStore} from 'src/stores/menu';
const authStore = useAuthStore();
import { useRouter } from 'vue-router';
const router = useRouter();
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { isAdminInterface } from 'src/api/user';
import { userNameIsStop } from 'src/api/user';
// import {error} from "echarts/types/src/util/log";
let loading = ref(false);
let passwordShow = ref(false);
interface RuleForm {
  username: string;
  password: string;
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  username: '',
  password: '',
});
const validateUsername = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('请输入登录账号'));
  }
  authStore
    .userIsStop(ruleForm.username)
    .then((res) => {
      if (res.data.msg !== 'continue') {
        callback(new Error('该用户已经被停用'));
      }
      callback();
    })
    .catch((err) => {
      callback(new Error(err.response.data.msg));
      loading.value = false;
    });
};
const validatePassword = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('请输入登录账号'));
  }
};
const rules = reactive<FormRules<RuleForm>>({
  username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
  password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
});
function isAdmin() {
  isAdminInterface().then((res) => {
    loading.value = false;
    const { is_admin } = res.data;
    const userInfo = { is_admin: is_admin };
    localStorage.setItem('user', JSON.stringify(userInfo)); //存储是否是系统管理员
    ElMessage.success(`Hi, ${ruleForm.username} 欢迎使用本平台！`);
    router.replace({ path: '/v2/set-project' });
  });
}
function sign() {
  loading.value = true;
  authStore
    .signin(ruleForm.username, ruleForm.password)
    .then(() => {
      isAdmin(); //判断是否是系统用户或者普通用户
    })
    .catch((err) => {
      loading.value = false;
      ElMessage.error('用户名或密码错误');
    });
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      sign();
    }
  });
};
</script>

<style lang="scss" scoped>
.loginWrap {
  position: relative;
  .login {
    display: flex;
    flex-direction: row;
    position: absolute;
    width: 720px;
    height: 404px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    .login-left {
      position: relative;
      display: flex;
      justify-content: center;
      width: 50%;
      background-color: rgb(108, 116, 247);
    }
    .login-right {
      width: 50%;
      vertical-align: middle;
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 5px 5px 20px 5px rgba(12, 12, 13, 0.2);
      border-radius: 6px;
      position: relative;
      box-sizing: border-box;
      padding: 30px;
      .language {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        height: 30px;
        align-items: center;
        width: 100%;
        .language-icon {
          width: 18px;
          height: 18px;
          margin-right: 10px;
        }
        .select {
          width: 50px;
        }
      }
      .loginTitle {
        display: flex;
        flex-direction: column;
        margin-top: 30px;
        width: 100%;
        .text {
          font-weight: bold;
          text-align: center;
          font-size: 14px;
          letter-spacing: 1px;
        }
        .line {
          width: 24px;
          height: 3px;
          margin: 5px auto 0 auto;
          border-radius: 2px;
          background-color: #1b5bd8;
        }
      }
    }
  }
}

.error {
  color: $negative;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 50px;
  bottom: 10px;
}

.login-title {
  line-height: 60px;
  font-size: 22px;
  font-weight: 600;
  margin-left: 20px;
  color: #333;
}
</style>
